<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="缴费申诉"></xk-header>
		<view class="list">
			<view class="list-item desc-item">
				<view>
					<textarea type="text" v-model="reason" placeholder="请在此输入您的申诉，我们将尽快安排人员为您进行服务~" placeholder-style="color:#ccc"/>
				</view>
			</view>
			<view class="list-item upload-img-item">
				<!-- <upload-image images="" @onChange="uploadImageChange"/> -->
			</view>
		</view>
		<view class="common-btn" @click="onSubmit()">确认申诉</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reason: "",
				data:{}
			}
		},
		onLoad(options){
			if (options && options.data) {
				this.data = JSON.parse(options.data)
				console.warn("data: ", this.data)
			}
		},
		methods:{
			onSubmit() {
				if (!this.reason) {
					this.$util.toast("请填写您的申诉理由")
					return
				}
				this.$util.confirm({
					content: "确定要提交申诉？",
					confirmText: "提交"
				}).then(isConfirm => {
					if (isConfirm) {
						this.$util.post({
							url: "app/piPayNotice/appeal",
							data: {
								pay_id: this.data.pay_id,
								reason: this.reason
							}
						}).then(res => {
							this.$util.toast("提交成功")
							this.callback()
						})
					}
				})
			},
			uploadImageChange(images) {
				console.warn("图片列表：", images)
				// this.formInfo.repair_image = images
			},
			callback() {
				this.$api.piPayNotice_getPiPayNoticeSingle({
					pay_id: this.data.pay_id
				}).then(res=>{
					if (this.eventName) {
						this.$EventBus.$emit(this.eventName, res);
					}
					setTimeout(()=>{
						uni.navigateBack();
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;

		color: #333;
		font-size: 28rpx;
		padding: 35rpx 20rpx;
	}

	.desc-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		:last-child {
			padding: 5rpx;
			width: 100%;
			height: 150rpx;

			>textarea {
				margin: 0rpx;
			}
		}
	}
	.upload-img-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		.add-img-view {
			display: flex;
			align-items: center;
			flex-direction: row;
			background-color: #FFFFFF !important;
			color: #999;
			font-size: 24rpx;
			margin-top: 20rpx;


			.add-img {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}
			.add-img-view-item {
				margin-right: 5rpx;
				:first-child {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}
	}
}

</style>
